<template>
  <div class="app-container fence-container" @contextmenu.prevent>
    <div class="fence-list-container">
      <div class="fence-list-header">
        <el-form :model="queryFenceForm" ref="queryRef" inline v-show="queryFenceFormShowSearch">
          <el-form-item label="名称" prop="name">
            <el-input v-model="queryFenceForm.name" placeholder="请输入名称" clearable @keyup.enter="queryFenceList"/>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryFenceForm.status" placeholder="围栏状态" clearable>
              <el-option v-for="status in fenceStatusMap"
                         :value="status.value"
                         :label="status.label"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="queryFenceList">搜索</el-button>
            <el-button icon="Refresh" @click="resetQueryFenceForm">重置</el-button>
          </el-form-item>
        </el-form>

        <div class="table-tools mb8">
          <div>
            <el-button type="danger"
                       icon="Delete"
                       plain
                       :disabled="fenceTableMultiple"
                       @click="handleDeleteFenceList"
                       v-hasPermi="['core:fence:remove']">删除</el-button>
          </div>
        </div>
      </div>
      <div class="fence-list">
        <el-auto-resizer>
          <template #default="{height}">
            <el-table :data="fenceList"
                      :height="height"
                      v-loading="fenceListLoading"
                      ref="fenceListTableRef"
                      @row-dblclick="handleFenceListTableDblClick"
                      @selection-change="handleFenceTableSelectionChange">
              <el-table-column align="center" type="selection"/>
              <el-table-column align="center" type="index" label="序号" width="80"/>
              <el-table-column align="center" prop="name" label="名称"/>
              <el-table-column align="center" prop="description" label="描述" show-tooltip-when-overflow/>
              <el-table-column align="center" prop="dept.deptName" label="所属部门"/>
              <el-table-column align="center" label="生效时段" width="160">
                <template #default="{row}">
                  <span>{{row.enableTime}} - {{row.disableTime}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="status" label="状态" :formatter="statusFormatter"/>
              <el-table-column align="center" label="操作" width="160">
                <template #default="{row}">
                  <el-button type="primary"
                             link
                             icon="Operation"
                             v-hasPermi="['core:fence-rule:list']"
                             @click="openFenceRuleDialog(row)">规则配置</el-button>
                  <el-button type="primary"
                             link
                             icon="Edit"
                             v-hasPermi="['core:fence:edit']"
                             @click="handleEditFence(row)">修改</el-button>
                  <el-button type="primary"
                             link
                             icon="Delete"
                             v-hasPermi="['core:fence:remove']"
                             @click="handleDeleteFence(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-auto-resizer>
      </div>
      <div class="fence-list-pagination">
        <pagination :total="fenceListTotal"
                    v-model:page="queryFenceForm.pageNum"
                    v-model:limit="queryFenceForm.pageSize"
                    @pagination="queryFenceList"/>
      </div>
    </div>
    <div class="fence-map-container">
      <div class="map-container" ref="mapContainer"/>

      <div class="fence-map-toolbar">
        <el-button-group>
          <el-button v-if="!drawing" type="primary" @click="startDraw">新增围栏</el-button>
          <el-button v-else type="primary" @click="closeDraw">结束编辑</el-button>
          <el-button type="primary" @click="refreshMap">刷新</el-button>
        </el-button-group>
      </div>
    </div>

    <el-dialog :title="fenceDialogTitle"
               width="30%"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               v-model="fenceDialogVisible">
      <template #default>
        <el-form :model="fenceForm" :rules="fenceFormRules" ref="fenceFormRef" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="fenceForm.name" :maxlength="20" show-word-limit placeholder="请输入名称"/>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="fenceForm.description"
                      type="textarea"
                      :rows="5"
                      :maxlength="255"
                      show-word-limit
                      placeholder="请输入描述"/>
          </el-form-item>
          <el-form-item label="部门" prop="deptId">
            <el-tree-select
              v-model="fenceForm.deptId"
              :data="deptOptions"
              :props="{ value: 'id', label: 'label', children: 'children' }"
              value-key="id"
              placeholder="请选择归属部门"
              check-strictly/>
          </el-form-item>
          <el-form-item label="生效时段" prop="time">
            <el-time-picker v-model="fenceForm.time"
                            is-range
                            value-format="HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="请选择时间范围"/>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="fenceForm.status">
              <el-radio v-for="status in fenceStatusMap" :label="status.value">{{status.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="submitFenceForm">确 定</el-button>
        <el-button @click="cancelFenceForm">取 消</el-button>
      </template>
    </el-dialog>

    <el-dialog title="规则配置"
               width="70%"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               append-to-body
               v-model="fenceRuleDialogVisible">
      <template #default>
        <el-form :model="queryFenceRuleForm" inline>
          <el-form-item label="工号" prop="userName">
            <el-input v-model="queryFenceRuleForm.userName" placeholder="请输入工号" clearable @keyup.enter="getFenceRule"/>
          </el-form-item>
          <el-form-item label="姓名" prop="nickName">
            <el-input v-model="queryFenceRuleForm.nickName" placeholder="请输入姓名" clearable @keyup.enter="getFenceRule"/>
          </el-form-item>
          <el-form-item label="规则" prop="direction">
            <el-select v-model="queryFenceRuleForm.direction" placeholder="规则" clearable>
              <el-option v-for="rule in fenceRuleMap" :value="rule.value" :label="rule.label"/>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryFenceRuleForm.status" placeholder="规则状态" clearable>
              <el-option v-for="status in fenceStatusMap" :value="status.value" :label="status.label"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getFenceRule">搜索</el-button>
            <el-button icon="Refresh" @click="resetQueryFenceRuleForm">重置</el-button>
          </el-form-item>
        </el-form>

        <div class="table-tools mb8">
          <div>
            <el-button type="primary"
                       icon="Plus"
                       plain
                       @click="handleAddFenceRule(fenceRule.In.value)"
                       v-hasPermi="['core:fence-rule:add']">进栏规则</el-button>
            <el-button type="primary"
                       icon="Plus"
                       plain
                       @click="handleAddFenceRule(fenceRule.Out.value)"
                       v-hasPermi="['core:fence-rule:add']">出栏规则</el-button>
            <el-button type="danger"
                       icon="Delete"
                       plain
                       :disabled="fenceRuleTableMultiple"
                       @click="handleDeleteFenceRuleList"
                       v-hasPermi="['core:fence-rule:remove']">删除</el-button>
          </div>
        </div>

        <el-table :data="fenceRuleList"
                  v-loading="fenceRuleListLoading"
                  ref="fenceRuleListTableRef"
                  max-height="500"
                  @selection-change="handleFenceRuleTableSelectionChange">
          <el-table-column align="center" type="selection"/>
          <el-table-column align="center" type="index" label="序号" width="80"/>
          <el-table-column align="center" prop="userName" label="工号"/>
          <el-table-column align="center" prop="nickName" label="姓名"/>
          <el-table-column align="center" prop="direction" label="规则" :formatter="fenceDirectionFormatter"/>
          <el-table-column align="center" prop="status" label="状态" :formatter="statusFormatter"/>
          <el-table-column align="center" label="操作">
            <template #default="{row}">
              <el-button v-if="row.status === fenceStatus.Enabled.value"
                         type="primary"
                         link
                         icon="CircleCheck"
                         v-hasPermi="['core:fence-rule:edit']"
                         @click="handleUpdateFenceRule(row)">停用</el-button>
              <el-button v-else
                         type="primary"
                         link
                         icon="CircleCheck"
                         v-hasPermi="['core:fence-rule:edit']"
                         @click="handleUpdateFenceRule(row)">启用</el-button>
              <el-button type="primary"
                         link
                         icon="Delete"
                         v-hasPermi="['core:fence-rule:remove']"
                         @click="handleDeleteFenceRule(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination :total="fenceRuleListTotal"
                    v-model:page="queryFenceRuleForm.pageNum"
                    v-model:limit="queryFenceRuleForm.pageSize"
                    @pagination="getFenceRule"/>
      </template>
    </el-dialog>

    <el-dialog :title="fenceRuleFormDialogTitle"
               width="30%"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               append-to-body
               v-model="fenceRuleFormDialogVisible">
      <template #default>
        <el-form :model="fenceRuleForm" :rules="fenceRuleFormRules" ref="fenceRuleFormRef" label-width="60px">
          <el-form-item label="人员" prop="userIds">
            <el-select v-model="fenceRuleForm.userIds" multiple placeholder="请选择人员">
              <el-option v-for="user in noRuleUserList"
                         :key="user.userId"
                         :value="user.userId"
                         :label="`${user.nickName}(${user.userName})`"/>
            </el-select>
          </el-form-item>
          <el-form-item label="规则" prop="direction">
            <el-radio-group v-model="fenceRuleForm.direction">
              <el-radio v-for="rule in fenceRuleMap" :label="rule.value">{{rule.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="fenceRuleForm.status">
              <el-radio v-for="status in fenceStatusMap" :label="status.value">{{status.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="submitFenceRuleForm">确 定</el-button>
        <el-button @click="cancelFenceRuleForm">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Fence">
import {key, keyCode} from "@/constant/amap";
import AMapLoader from "@amap/amap-jsapi-loader"
import {getCurrentInstance, markRaw, ref, onMounted, onBeforeUnmount, reactive, computed} from "vue";
import {fenceStatus, fenceStatusMap} from "@/constant/fenceStatus";
import {fenceRule, fenceRuleMap} from "@/constant/fenceRule";
import {deptTreeSelect, listUser} from "@/api/system/user";
import {listDept} from "@/api/system/dept";
import {addFence, getFenceList, deleteFenceByIds, getFenceById, editFence} from "@/api/core/fence"
import {getFenceRuleList, addFenceRuleList, deleteFenceRuleByIds, updateFenceRule} from "@/api/core/fenceRule";

const {proxy: currentInstance} = getCurrentInstance()
const deptOptions = ref(undefined)
let map = null
let infoWindow = null
const drawing = ref(false)
let mouseTool = null
const fenceListLoading = ref(false)
const fenceList = ref([])
const fenceListTotal = ref(0)
const fenceTableMultiple = ref(true)
const queryFenceForm = ref({
  name: '',
  status: '',
  pageNum: 1,
  pageSize: 10
})
const queryFenceFormShowSearch = ref(true)
let fenceMap = {}
const fenceForm = ref({
  name: '',
  description: '',
  deptId: 100,
  time: ['08:00:00', '17:00:00'],
  enableTime: '08:00:00',
  disableTime: '17:00:00',
  status: fenceStatus.Enabled.value,
  points: []
})
const fenceFormRules = reactive({
  name: [
    {required: true, message: '请输入围栏名称', trigger: 'blur'}
  ]
})
const fenceFormRef = ref(null)
const fenceDialogVisible = ref(false)
const fenceDialogTitle = ref('')

const fenceRuleDialogVisible = ref(false)
const fenceRuleListLoading = ref(false)
const fenceRuleList = ref([])
const fenceRuleListTotal = ref(0)
const fenceRuleTableMultiple = ref(true)
const queryFenceRuleForm = ref({
  fenceId: '',
  deptId: -1,
  status: '',
  direction: '',
  userName: '',
  nickName: '',
  pageNum: 1,
  pageSize: 10
})
const fenceRuleForm = ref({
  userIds: [],
  direction: fenceRule.In.value,
  status: fenceStatus.Enabled.value
})
const fenceRuleFormRules = reactive({
  userIds: [
    {required: true, message: '请选择人员', trigger: 'blur'}
  ]
})
const fenceRuleFormDialogVisible = ref(false)
const fenceRuleFormDialogTitle = ref('')

const userList = ref([])

const noRuleUserList = computed(() => {
  const existRuleUserIds = fenceRuleList.value.map(item => item.userId)
  return userList.value.filter(item => !existRuleUserIds.includes(item.userId))
})

const deptMap = reactive({})

onMounted(async () => {
  // getDeptList()
  await initMap()
  queryFenceList()
})

onBeforeUnmount(() => {
  destroyMap()
})

function getDeptList() {
  listDept().then(res => {
    const deptList = res.data
    for (const dept of deptList) {
      deptMap[dept.deptId] = dept
    }
  })
}

function getDeptName(row) {
  const dept = deptMap[row.deptId]
  return dept ? dept.deptName : '--'
}

function getDeptTree() {
  deptTreeSelect().then(res => {
    deptOptions.value = res.data
  });
}

function queryFenceList() {
  fenceListLoading.value = true
  getFenceList(queryFenceForm.value).then(res => {
    const {rows, total} = res
    fenceList.value = rows
    fenceListTotal.value = total

    drawFence()
  }).finally(() => {
    fenceListLoading.value = false
  })
}

function resetQueryFenceForm() {
  queryFenceForm.value = {
    name: '',
    status: '',
    pageNum: 1,
    pageSize: 10
  }
}

function handleFenceListTableDblClick(row) {
  const fencePolygon = fenceMap[row.id].polygon
  map.setFitView([fencePolygon])
}

function drawFence() {
  fenceMap = {}
  map.clearMap()
  const polygons = []
  const textLabels = []
  for (const fence of fenceList.value) {
    const path = fence.points.map(item => [item.longitude, item.latitude])

    const polygon = new AMap.Polygon({
      path,
      strokeColor: fence.status === fenceStatus.Enabled.value ? "red" : "gray",
      strokeWeight: 3,
      strokeOpacity: 0.8,
      fillOpacity: 0.5,
      fillColor: 'white',
      extData: {
        fenceId: fence.id,
        fenceName: fence.name,
      }
    })

    /*polygon.on('mouseover', e => {
      if (!drawing.value && infoWindow === null) {
        openFenceInfoWindow(e)
      }
    })
    polygon.on('mouseout', e => {
      closeFenceInfoWindow(e)
    })*/

    polygons.push(polygon)

    const center = polygon.getBounds().getCenter()
    const textLabel = new AMap.Text({
      position: new AMap.LngLat(center.lng, center.lat),
      text: fence.name,
      offset: [-fence.name.length * 18 / 2, 0]
    })
    textLabels.push(textLabel)
    fenceMap[fence.id] = {
      polygon,
      textLabel
    }
  }
  map.add(polygons)
  map.add(textLabels)
}

function openFenceInfoWindow(e) {
  //构建信息窗体中显示的内容
  const extData = e.target.getExtData()
  let info = []
  info.push(`<span style="padding:0 0 0 4px;"><b>围栏名称: </b>${extData.fenceName}</span>`)
  infoWindow = markRaw(new AMap.InfoWindow({
    content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
  }))
  infoWindow.open(map, e.lnglat)
}

function closeFenceInfoWindow(e) {
  if (infoWindow !== null) {
    infoWindow.close(map, e.lnglat)
    infoWindow = null
  }
}

async function initMap() {
  if (!window.AMap) {
    window._AMapSecurityConfig = {
      securityJsCode: keyCode
    }
    try {
      await AMapLoader.load({
        key,
        version: '2.0',
        plugins: ['AMap.MouseTool', 'AMap.ContextMenu', 'AMap.PolyEditor', 'AMap.MapType', 'AMap.Scale', 'AMap.OverView',
          'AMap.ControlBar', 'Map3D', 'AMap.DistrictSearch', 'AMap.MarkerClusterer', 'AMap.ToolBar', 'AMap.Geolocation']
      })
    } catch (e) {
      currentInstance.$modal.msgError('地图加载失败')
    }
  }

  map = markRaw(new AMap.Map(currentInstance.$refs.mapContainer, {
    resizeEnable: true,
    rotateEnable: true,
    pitchEnable: true,
    showLabel: true,
    zoom: 16,
    zooms: [2, 30],
    rotation: 0,
    viewMode: '3D',
    skyColor: '#132237'
  }))
  const geoLocation = new AMap.Geolocation({
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
    convert: true,
    showButton: true,
    position: 'RB',
    offset: [20, 90],
    showMarker: true,
    showCircle: true,
    panToLocation: true,
    zoomToAccuracy: true
  })
  map.addControl(geoLocation)
  geoLocation.getCurrentPosition(() => {})

  map.addControl(new AMap.ToolBar())
  map.addControl(new AMap.ControlBar({
    position: 'LT',
    offset: [10, 50]
  }))
  map.addControl(new AMap.Scale())
  // map.addControl(new AMap.OverView({isOpen: true}))
  map.addControl(new AMap.MapType({defaultType:1}))
}

function destroyMap() {
  map.destroy()
  map = null
}

async function refreshMap() {
  destroyMap();
  await initMap();
  queryFenceList()
}

function startDraw() {
  drawing.value = true
  mouseTool = markRaw(new AMap.MouseTool(map))
  mouseTool.on('draw', e => {
    fenceForm.value.points = e.obj.getPath().map((item, index) => {
      return {
        latitude: item.lat,
        longitude: item.lng,
        priority: index
      }
    });
    handleAddFenceForm()
  });
  drawPolygon()
}

function drawPolygon() {
  if (mouseTool) {
    mouseTool.polygon({
      strokeWeight: 3,
      fillOpacity: 0.4,
      fillColor: '#00b0ff',
      strokeColor: '#80d8ff',
      borderWeight: 3,
    })
  }
}

function closeDraw() {
  if (drawing.value) {
    drawing.value = false;
    mouseTool.close()
  }
}

function handleAddFenceForm() {
  getDeptTree();
  fenceDialogTitle.value = '新增电子围栏';
  fenceDialogVisible.value = true
}

function handleEditFence(row) {
  getFenceById(row.id).then(res => {
    resetFenceForm();
    fenceForm.value = res.data;
    fenceForm.value.time = [fenceForm.value.enableTime, fenceForm.value.disableTime]
    getDeptTree();
    fenceDialogTitle.value = '修改电子围栏';
    fenceDialogVisible.value = true
  })
}

async function deleteFence(fenceIds) {
  await deleteFenceByIds(fenceIds);

  queryFenceList();
  currentInstance.$modal.msgSuccess('删除成功')
}

async function handleDeleteFence(row) {
  const fenceIds = [row.id];
  await currentInstance.$modal.confirm('您确定要删除此条数据吗？');
  await deleteFence(fenceIds)
}

async function handleDeleteFenceList() {
  const selectionRows = currentInstance.$refs.fenceListTableRef.getSelectionRows();
  const fenceIds = selectionRows.map(item => item.id);
  await currentInstance.$modal.confirm('您确定要删除勾选的数据吗？');
  await deleteFence(fenceIds)
}

function handleFenceTableSelectionChange(selection) {
  fenceTableMultiple.value = !selection.length;
}

function submitFenceForm() {
  fenceFormRef.value.validate(valid => {
    if (!valid) {
      return
    }
    const form = {...fenceForm.value};
    form.enableTime = form.time[0];
    form.disableTime = form.time[1];
    delete form.time;

    if (form.id) {
      editFence(form).then(() => {
        currentInstance.$modal.msgSuccess('修改成功');
        cancelFenceForm();
        queryFenceList()
      })
    } else {
      addFence(form).then(() => {
        currentInstance.$modal.msgSuccess('添加成功');
        cancelFenceForm();
        queryFenceList()
      })
    }
  })
}

function cancelFenceForm() {
  fenceDialogVisible.value = false;
  resetFenceForm();
  drawFence()
}

function resetFenceForm() {
  fenceForm.value = {
    name: '',
    description: '',
    deptId: '',
    time: ['08:00:00', '17:00:00'],
    enableTime: '08:00:00',
    disableTime: '17:00:00',
    status: fenceStatus.Enabled.value,
    points: []
  };
  if (fenceFormRef.value) {
    fenceFormRef.value.clearValidate()
  }
}

function resetQueryFenceRuleForm() {
  const {fenceId, deptId} = queryFenceRuleForm.value
  queryFenceRuleForm.value = {
    fenceId,
    deptId,
    status: '',
    direction: '',
    userName: '',
    nickName: '',
    pageNum: 1,
    pageSize: 10
  }
  getFenceRule()
}

function openFenceRuleDialog(row) {
  queryFenceRuleForm.value.fenceId = row.id
  queryFenceRuleForm.value.deptId = row.deptId
  getFenceRule()
  fenceRuleTableMultiple.value = true
  fenceRuleDialogVisible.value = true
}

function getFenceRule() {
  fenceRuleListLoading.value = true
  getFenceRuleList(queryFenceRuleForm.value).then(res => {
    const {rows, total} = res
    fenceRuleList.value = rows
    fenceRuleListTotal.value = total
  }).finally(() => {
    fenceRuleListLoading.value = false
  })
}

function getUserListByDeptId() {
  const params = {
    deptId: queryFenceRuleForm.value.deptId
  }
  listUser(params).then(res => {
    userList.value = res.rows
  })
}

function handleAddFenceRule(direction) {
  getUserListByDeptId()

  fenceRuleForm.value.direction = direction
  fenceRuleFormDialogTitle.value = direction === fenceRule.In.value ? '进栏规则配置' : '出栏规则配置'
  fenceRuleFormDialogVisible.value = true
}

function submitFenceRuleForm() {
  currentInstance.$refs.fenceRuleFormRef.validate(valid => {
    if (!valid) {
      return
    }

    const rules = []
    const fenceId = queryFenceRuleForm.value.fenceId
    const {direction, status, userIds} = fenceRuleForm.value
    for (const userId of userIds) {
      rules.push({userId, fenceId, direction, status,})
    }

    addFenceRuleList(rules).then(() => {
      getFenceRule()
      currentInstance.$modal.msgSuccess('添加成功')
      fenceRuleFormDialogVisible.value = false
      resetFenceRuleForm()
    })
  })
}

function cancelFenceRuleForm() {
  resetFenceRuleForm()
  fenceRuleFormDialogVisible.value = false
}

function resetFenceRuleForm() {
  fenceRuleForm.value = {
    userIds: [],
    direction: fenceRule.In.value,
    status: fenceStatus.Enabled.value
  }
  if (currentInstance.$refs.fenceRuleFormRef) {
    currentInstance.$refs.fenceRuleFormRef.clearValidate()
  }
}

function handleFenceRuleTableSelectionChange(selection) {
  fenceRuleTableMultiple.value = !selection.length;
}

async function deleteFenceRule(fenceRuleIds) {
  await deleteFenceRuleByIds(fenceRuleIds)

  getFenceRule()
  currentInstance.$modal.msgSuccess('删除成功')
}

async function handleDeleteFenceRule(row) {
  const fenceRuleIds = [row.id]
  await currentInstance.$modal.confirm('您确定要删除此条数据吗？')
  await deleteFenceRule(fenceRuleIds)
}

async function handleDeleteFenceRuleList() {
  const selectionRows = currentInstance.$refs.fenceRuleListTableRef.getSelectionRows()
  const fenceRuleIds = selectionRows.map(item => item.id)
  await currentInstance.$modal.confirm('您确定要删除勾选的数据吗？')
  await deleteFenceRule(fenceRuleIds)
}

function handleUpdateFenceRule(row) {
  const data = {...row}
  if (data.status === fenceStatus.Enabled.value) {
    data.status = fenceStatus.Disabled.value
  } else {
    data.status = fenceStatus.Enabled.value
  }
  updateFenceRule(data).then(() => {
    getFenceRule()
    currentInstance.$modal.msgSuccess('操作成功')
  })
}

function statusFormatter(row) {
  return fenceStatusMap[row.status].label
}

function fenceDirectionFormatter(row) {
  return fenceRuleMap[row.direction].label
}
</script>

<style scoped lang="scss">
.fence-container {
  display: flex;
  height: 100%;
  box-sizing: border-box;

  .fence-list-container {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;

    .fence-list {
      flex: 1;
    }
  }

  .fence-map-container {
    flex: 1;
    height: 100%;
    position: relative;

    .fence-map-toolbar {
      position: absolute;
      top: 10px;
      left: 10px;
    }

    .map-container {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
